<style>
    #admin-user-profile #user-profile, #admin-user-profile .user-profile-card {
        display: inline-block;
    }

    #admin-user-profile #user-img, #admin-user-profile #user-info {
        display: inline-block;
        float: left;
    }

    #admin-user-profile #user-img img {
        width: 7rem;
        margin: 1rem;
        border-radius: 50%;
        cursor: pointer;
    }

    #admin-user-profile #user-info {
        margin: .95rem 0 .95rem 1.2rem;
    }

    #admin-user-profile #user-info div {
        margin: 3px 0;
        max-width: 22rem;
    }

    #admin-user-profile #options-wrapper {
        text-align: center;
        margin-top: .5rem;
    }

    #admin-user-profile #update-user-info {
        cursor: pointer;
        margin-left: -1rem;
    }

    #admin-user-profile #options-wrapper a {
        padding: 4px 6px;
        color: rgba(0, 0, 0, 0.65);
        border: 1px solid #d9d9d9;
        border-radius: 2px;
    }

    #admin-user-profile #options-wrapper a:hover {
        color: #40a9ff;
        border-color: #40a9ff;
    }

    #admin-user-profile .layui-form-item {
        margin-bottom: 0;
    }
</style>
<div class="layui-fluid layui-anim admin-anim" id="admin-user-profile" lay-title="个人中心">
    <div class="layui-row layui-col-space8 admin-container">
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">个人信息</div>
                <div class="layui-card-body user-profile-card">
                    <div id="user-profile">
                        <div id="user-img">
                            <img alt="头像" title="点我更换头像" data-th-src="@{admin/images/avatar/empty.jpg}">
                            <div id="options-wrapper">
                                <div id="update-user-info">
                                    <a>
                                        <span class="layui-icon layui-icon-setting"></span>
                                        编辑资料
                                    </a>
                                </div>
                            </div>
                        </div>
                        <script type="text/html" template>
                            <div id="user-info">
                                <div><span class="layui-icon layui-icon-user"></span> 账号：
                                    {{currentUser.username}}
                                </div>
                                <div><span class="layui-icon layui-icon-trophy"></span> 角色：
                                    {{currentUser.roleName}}
                                </div>
                                <div><span class="layui-icon layui-icon-home"></span> 部门：
                                    {{currentUser.deptName || '暂无所属部门'}}
                                </div>
                                <div><span class="layui-icon layui-icon-skin"></span> 性别：
                                    {{# if(currentUser.sex === '0'){ }}
                                    男
                                    {{# } }}
                                    {{# if(currentUser.sex === '1'){ }}
                                    女
                                    {{# } }}
                                    {{# if(currentUser.sex === '2'){ }}
                                    保密
                                    {{# } }}
                                </div>
                                <div><span class="layui-icon layui-icon-phone"></span> 电话：
                                    {{currentUser.mobile?currentUser.mobile:'暂无电话信息'}}
                                </div>
                                <div><span class="layui-icon layui-icon-mail"></span> 邮箱：
                                    {{currentUser.email?currentUser.email:'暂无电话信息'}}
                                </div>
                                <div><span class="layui-icon layui-icon-read"></span> 简介：
                                    {{currentUser.description?currentUser.description:'暂无简介'}}
                                </div>
                            </div>
                        </script>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">系统配置</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="" lay-filter="system-setting-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">侧边栏风格</label>
                            <div class="layui-input-block">
                                <input type="radio" name="theme" lay-filter="theme" value="black" checked="" title="深邃">
                                <input type="radio" name="theme" lay-filter="theme" value="white" title="明亮">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">选项卡开关</label>
                            <div class="layui-input-block">
                                <input type="radio" name="isTab" lay-filter="tab" value="1" checked="" title="开启">
                                <input type="radio" name="isTab" lay-filter="tab" value="0" title="关闭">
                            </div>
                        </div>
                        <button class="admin-hide" lay-submit="" lay-filter="system-setting-form-submit"
                                id="submit-form"></button>
                    </form>
                </div>
                <div class="layui-card-footer">
                    <button class="layui-btn" id="submit">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-inline="none" type="text/javascript">
    layui.use(['jquery', 'form', 'admin'], function () {
        var $ = layui.jquery,
            admin = layui.admin,
            form = layui.form,
            _currentData = {
                theme: currentUser.theme,
                isTab: currentUser.isTab
            },
            $view = $('#admin-user-profile');

        form.render();
        initSettings();

        $view.find('#user-img img').attr('src', ctx + "admin/images/avatar/" + currentUser.avatar);
        $view.on('click', '#update-user-info', function () {
            admin.modal.view('个人信息修改', 'user/profile/update', {
                area: $(window).width() <= 750 ? '90%' : '50%',
                btn: ['确定'],
                yes: function () {
                    $('#profile-update').find('#submit').trigger('click');
                }
            });
        });

        $view.on('click', '#user-profile img', function () {
            admin.modal.view('点击更换', 'user/avatar', {
                area: $(window).width() <= 750 ? '90%' : '650px',
                offset: '100px'
            });
        });

        $view.on('click', '#submit', function () {
            $view.find('#submit-form').trigger('click');
        });

        function initSettings() {
            form.val("system-setting-form", _currentData);
        }

        form.on("radio(theme)", function (data) {
            var $sidebar = $('#app-sidebar');
            if (data.value === 'black') {
                $sidebar.removeClass('admin-theme-white');
            }
            if (data.value === 'white') {
                $sidebar.addClass('admin-theme-white');
            }
        });

        form.on('submit(system-setting-form-submit)', function (data) {
            if (admin.nativeEqual(data.field, _currentData)) {
                admin.alert.warn('数据未作任何修改');
                return false;
            }
            admin.post(ctx + 'user/theme/update', data.field, function () {
                _currentData = data.field;
                admin.modal.confirm('修改成功','是否马上刷新页面生效？',function () {
                    window.location.reload();
                });
            });
            return false;
        });


    })
</script>